<!-- 登录页面 -->
<template>
	<view :style="$store.state.skin">
		<view class="overall">
			<!-- <image src="../../static/login-icon/logo.jpg" class="login-icon"></image> -->
			<view class="login-icon"></view>
		</view>
		<view class="login">
			<form @submit="formsumit">
				<input type="text" placeholder="手机号码" class="input" name="account" />
				<input type="text" password placeholder="请输入密码" class="input" name="password" />
				<view class="auto">
					<button class="input button" form-type="submit">登录</button>
				</view>
			</form>
			<view class="br">或</view>
			<view class="auto">
				<button class="input register" @click="register">立即注册</button>
			</view>
			<view class="txtlist">
				<view class="col-1" v-for="(item, index) in txtlistData" :key="index" @click="toPages(item)">
					<view class="col-img">
						<image :src="`../../static/login-icon/${item.id}.png`" class=""></image>
					</view>
					<view class="col-title">
						{{ item.title }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/api/request.js';
export default {
	data() {
		return {
			txtlistData: [
				{
					id: 1,
					title: '新手指引',
					url: '/pages/noviceGuide/noviceGuide'
				},
				{
					id: 2,
					title: '关于我们',
					url: '/pages/aboutUs/aboutUs'
				},
				{
					id: 3,
					title: '在线客服',
					url: 'customerService'
				}
			]
		};
	},
	// 监听返回按钮
	onBackPress() {
		this.back();
		return true;
	},
	onShow() {
		// 设置导航栏颜色
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: this.$store.state.presentColor
		});
	},
	methods: {
		notification(title) {
			uni.showModal({
				title: title,
				showCancel: false
			});
		},
		async formsumit(e) {
			let reg = /^1[3-9]{1}[0-9]{9}$/;
			let phone = e.detail.value.account;
			let password = e.detail.value.password;
			if (phone.length == 0) {
				this.notification('请您填写手机号码');
			} else if (phone.length !== 0 && reg.test(phone) !== true) {
				this.notification('请输入正确的手机号码');
			} else if (phone.length !== 0 && reg.test(phone) == true) {
				if (password.length == 0) {
					this.notification('请输入您的密码');
				}
			}
			if (phone.length !== 0 && reg.test(phone) == true && password.length !== 0) {
				uni.showLoading({
					title: '登录中'
				});
				let data = await request.post('/api/user/login', {
					account: phone,
					password: password
				});
				if (data.code === 1) {
					uni.hideLoading();
					uni.setStorageSync('userData', data.data.userinfo);
					if (uni.getStorageSync('userData')) {
						uni.switchTab({
							url: '/pages/mine/mine'
						});
					}
				} else {
					uni.hideLoading();
					uni.showToast({
						title: data.msg,
						duration: 2000,
						icon: 'none'
					});
				}
			}
		},
		register() {
			uni.navigateTo({
				url: '/pages/register/register'
			});
		},
		back() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		toPages(data) {
			if (data.url == 'customerService') {
				// #ifdef H5
				console.log('走的h5页面');
				this.kfByH5();
				// #endif
				// APP： 打成app包的时候
				// #ifdef APP-PLUS
				console.log('走的app页面');
				this.kfByApp();
				// #endif

				return;
			}
			uni.navigateTo({
				url: data.url
			});
		},
		kfByApp() {
			// 首先需要通过 uni.requireNativePlugin("ModuleName") 获取 module
			var testModule = uni.requireNativePlugin('MeiQia-ChatPlugin');

			testModule.initChatViewManger();

			let _clientInfo = this.getMemberInfo();
			if (_clientInfo) {
				testModule.setClientInfo({
					clientInfo: _clientInfo,
					override: true
				});
			}

			testModule.showMeiQiaChatView();
		},
		kfByH5() {
			(function (m, ei, q, i, a, j, s) {
				m[i] =
					m[i] ||
					function () {
						(m[i].a = m[i].a || []).push(arguments);
					};
				(j = ei.createElement(q)), (s = ei.getElementsByTagName(q)[0]);
				j.async = true;
				j.charset = 'UTF-8';
				j.src = 'https://static.meiqia.com/dist/meiqia.js';
				s.parentNode.insertBefore(j, s);
			})(window, document, 'script', '_MEIQIA');
			_MEIQIA('entId', '430b9032c263fc9404214a3ce1bb8e6a');
			let _clientInfo = this.getMemberInfo();
			if (_clientInfo) {
				_MEIQIA('metadata', _clientInfo);
			}

			// 初始化成功后调用美洽 showPanel
			_MEIQIA('withoutBtn');
			_MEIQIA('allSet', function () {
				_MEIQIA('showPanel');
			});
			_MEIQIA('showPanel');
		},
		getMemberInfo() {
			//先读storage里面的信息
			let _memberInfo = {} || uni.getStorage('userData');
			if (_memberInfo) {
				return {
					address: '用户名：' + _memberInfo.username,
					weixin: '银行名称：' + _memberInfo.bank_name,
					name: _memberInfo.real_name,
					email: '昵称：' + _memberInfo.nickname,
					qq: '身份证号：' + _memberInfo.id_card,
					tel: _memberInfo.mobile,
					weibo: '银行卡号：' + _memberInfo.bank_num
				};
			}
			return [];
		}
	}
};
</script>

<style lang="scss" scoped>
.overall {
	width: 100%;
	height: 17.25rem;
	background: var(--login-bg) no-repeat;
	background-position-y: -2rem;
	background-size: 100%;
	display: flex;
	align-items: center;
	flex-direction: column-reverse;
	padding-top: 7.125rem;
	padding-bottom: 2.25rem;
	box-sizing: border-box;
}

.login-icon {
	width: 7.5rem;
	height: 7.5rem;
	background: var(--login-LOGO) no-repeat;
	background-size: 100%;
}

.login {
	width: 100%;
	height: 26.0399999993592rem;
	margin-top: 1.7999999964rem;
	.auto {
		display: flex;
		justify-content: center;
		button::after {
			border: none !important;
		}
	}
	.txtlist {
		display: flex;
		padding: 40rpx;
		.col-1 {
			flex: 1;
			text-align: center;
			.col-img {
				image {
					width: 20px;
					height: 20px;
				}
			}
			.col-title {
				font-size: 14px;
			}
		}
	}
}

.input {
	width: 18.18rem;
	height: 3rem;
	border: 0.0599999988rem solid #e1e1e1;
	margin: 0rem auto;
	border-radius: 2rem;
	padding-left: 1.1999999999976rem;
	box-sizing: border-box;
	margin-bottom: 0.77999999844rem;
	color: #282828;
	font-size: 0.8125rem;
}

.button {
	background-color: var(--nav-bg);
	color: var(--nav-color);
	font-size: 1.2rem;
	line-height: 3rem;
}

.register {
	background-color: transparent;
	border: 0.0599999988rem solid var(--nav-bg);
	color: var(--nav-bg);
	font-size: 1.2rem;
	line-height: 3rem;
}

.br {
	width: 100%;
	text-align: center;
	margin-bottom: 0.599998rem;
	color: #999999;
	font-size: 0.8125rem;
}
</style>
